<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>权限列表</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="/js/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/jquery-3.1.1.min.js"></script>
  <script src="/js/myhttp.js"></script>
</head>
<body>
<div id="app">
  <el-form :inline="true" class="demo-form-inline" >
    <el-form-item >
      <el-form-item label="关键词">
        <el-input v-model="querys"></el-input>
      </el-form-item>
      <el-button type="success" @click="Query()">查询</el-button>
      <el-button type="success" @click="QueryData()">刷新</el-button>
      <el-button type="success" @click="InsertNew()">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table border :data="dataList" style="width:100%">
    <el-table-column label="商品ID" prop="uid" ></el-table-column>
    <el-table-column label="图片" prop="image">
      <template slot-scope="scope">
        <img :src="scope.row.imgid" alt="Product Image" style="width: 50px; height: 50px;">
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="goodsname"></el-table-column>
    <el-table-column label="商品价格" prop="price"></el-table-column>
    <el-table-column>
      <template slot-scope="x">
        <el-button type="warning" size="mini" @click="Update(x.$index,x.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="SubmitDelete(x.$index,x.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :visible.sync="Updateing" width="30%" title="商品信息编辑">
    <el-form label-width="80px">
      <el-form-item label="商品名">
        <el-input v-model="select.goodsname"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="select.price"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="success" size="mini" @click="SubmitUpdate()" >保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog :visible.sync="Createing" width="30%" title="新增商品">
    <el-form label-width="80px">
      <el-form-item label="商品名">
        <el-input v-model="news.goodsname"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="news.price"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="success" size="mini" @click="SubmitNew()">提交数据</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</div>
</body>
<script>
  new Vue({
    el:"#app",
    data: {
      Createing:false,
      Updateing:false,
      dataList:[],
      news:{},
      select:{},
      querys:""
    },
    methods:{
      Query(){
        if (this.querys == ""){
          this.$message.error("请输入关键词")
          return
        }
        let that=this
        myhttps("/Goods/QueryGoods",{goodsname:this.querys}).then(res=>{
          that.dataList = []
          for (let i =0;i<res.body.length;i++){
            res.body[i].imgid = "http://localhost:8080/images/"+res.body[i].imgid
          }
          that.dataList = res.body
        }).catch(res=>{
          that.$message.error(res.msg)
        })
      },
      SubmitNew(){
        let that=this
        myhttps("/Goods/addGoods",
                {
                  goodsname:this.news.goodsname,
                  price:this.news.price,
                }
        ).then(res=>{
          that.$message.success("成功")
          that.news = {}
          that.Createing = false
          that.QueryData()
        }).catch(res=>{
          that.$message.error("错误"+res.msg)
        })
      },
      SubmitUpdate(){
        let that=this
        myhttps("/Goods/updateGoods",
                {
                  uid:this.select.uid,
                  goodsname:this.select.goodsname,
                  price:this.select.price
                }
        ).then(res=>{
          that.$message.success("成功")
          that.select = {}
          that.Updateing = false
        }).catch(res=>{
          that.$message.error("错误"+res.msg)
        })
      },
      SubmitDelete(idx,row){
        this.select = row
        let that=this
        myhttps("/Goods/deleteGoods",
                {
                  uid:this.select.uid,
                }
        ).then(res=>{
          that.$message.success("成功")
          that.select = {}
          that.Updateing = false
          that.dataList = []
          that.QueryData()
        }).catch(res=>{
          that.$message.error("错误"+res.msg)
        })
      },
      InsertNew(){
        this.news = {}
        this.Createing = true
      },
      Update(idx,row){
        this.select = row
        this.Updateing = true
      },
      QueryData(){
        let that=this
        myhttps("/Goods/getAll",{}).then(res=>{
          for (let i =0;i<res.body.length;i++){
            res.body[i].imgid = "http://localhost:8080/images/"+res.body[i].imgid
          }
          that.dataList = res.body

        }).catch(res=>{
          that.$message.error("错误："+res.msg)
        })
      }
    },
    mounted(){
      this.QueryData()
    }
  })

</script>
</html>
